import React from 'react';
import { Form, Row, Col, Input, Button, Icon, Select, Radio } from 'antd';
import './index.less'

const { Option } = Select;
const count = 2;
class SearchForm extends React.Component {
  state = {
    expand: false,
  };

  getFields() {
    const { getFieldDecorator } = this.props.form;
    const children = [];
    this.props.searchList.forEach((item,index)=>{
      if(item.type === 'input'){
        children.push(
          <Col className="search-item" key={item.name} style={{ display: index < count || this.state.expand ? 'inline-block' : 'none' }}>
            <Form.Item label={`${item.label} :`}>
              {getFieldDecorator(`${item.name}`)(<Input placeholder={`请输入${item.label}`} />)}
            </Form.Item>
          </Col>,
        );
      }else if(item.type === 'select'){
        children.push(
          <Col className="search-item" key={item.name} style={{ display: index < count||this.state.expand ? 'inline-block' : 'none' }}>
            <Form.Item label={`${item.label} :`}>
              {getFieldDecorator(`${item.name}`)(
                <Select
                  placeholder={`请选择${item.label}`}
                >
                  {
                    item.options.map((i)=>
                      <Option value={item.valueProp ? i[item.valueProp] : i.value} key={item.valueProp ? i[item.valueProp] : i.value}>
                        {item.nameProp ? i[item.nameProp] : i.name}
                      </Option>
                    )
                  }
                </Select>
              )}
            </Form.Item>
          </Col>
        );
      }else if(item.type === 'radio'){
        children.push(
          <Col className="search-item" key={item.name} style={{ display: index < count||this.state.expand ? 'block' : 'none' }}>
            <Form.Item label={`${item.label} :`}>
              {getFieldDecorator(`${item.name}`)(
                <Radio.Group>
                  {
                    item.options.map((i)=>
                      <Radio value={i.value} key={i.value}>{i.name}</Radio>
                    )
                  }
                </Radio.Group>
              )}
            </Form.Item>
          </Col>
        );
      }
    })
    return children;
  }

  handleSearch = e => {
    e.preventDefault();
    console.log("value",this.props.form.getFieldsValue())
    var params = Object.assign(this.props.form.getFieldsValue(), this.props.searchForm)  
    this.props.searchMethod(params)
  };

  handleReset = () => {
    this.props.form.resetFields();
  };

  toggle = () => {
    const { expand } = this.state;
    this.setState({ expand: !expand });
  };

  render() {
    return (
      <Form className="search-form" onSubmit={this.handleSearch}>
        <Row gutter={24}>
          {this.getFields()}
          <Col className={this.state.expand ? 'searchButton-block' : 'searchButton-inline'}>
            <Button type="primary" htmlType="submit">
              搜索
            </Button>
            <Button onClick={this.handleReset}>
              重置
            </Button>
            <i className="expand" onClick={this.toggle} style={{display: this.props.searchList.length>count? '' : 'none'}}>
              <Icon type={this.state.expand ? 'up' : 'down'} />
            </i>
          </Col>
        </Row>
      </Form>
    );
  }
}

const SearchHeader = Form.create({ name: 'search' })(SearchForm);
export {SearchHeader}